<template>
<div>
  <div class="breadcrumb-container">
    <el-breadcrumb separator="Ξ">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in breadcrumbItem" :key="index">{{item.name}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <div class="list-container">
    <div class="category-sidebar">
      <div class="category-item" :class="{'active': swiperIndex == '-1'}" @click="getList(1, '全部')" :plain="isPlain">全部</div>
      <div class="category-item" :class="{'active': swiperIndex == index}" v-for="(item, index) in fenlei" :key="index" @click="getList(1, item, 'btn' + index)" :ref="'btn' + index" plain>{{item}}</div>
    </div>

    <el-form :inline="true" :model="formSearch" class="search-form">
      <el-form-item>
        <div class="form-label">商品名称</div>
        <el-input v-model="formSearch.shangpinmingcheng" placeholder="商品名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <div class="form-label">品牌</div>
        <el-input v-model="formSearch.pinpai" placeholder="品牌" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <div class="form-label">商铺名称</div>
        <el-input v-model="formSearch.shangpumingcheng" placeholder="商铺名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <div class="form-label">价格</div>
        <el-input v-model="formSearch.pricestart" placeholder="最小价格" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="formSearch.priceend" placeholder="最大价格" clearable></el-input>
      </el-form-item>
      <el-button class="search-btn" type="primary" @click="getList(1, curFenlei)">
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button v-if="isAuth('shangpinxinxi','新增')" class="add-btn" type="success" @click="add('/index/shangpinxinxiAdd')">
        <i class="el-icon-circle-plus-outline"></i>添加
      </el-button>
    </el-form>

    <div class="product-list">
      <div class="product-item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item)">
        <div class="product-img">
          <img v-if="item.shangpintupian && item.shangpintupian.substr(0,4)=='http'" :src="item.shangpintupian"/>
          <img v-else :src="baseUrl + (item.shangpintupian?item.shangpintupian.split(',')[0]:'')"/>
        </div>
        <div class="product-info">
          <div class="product-name">{{item.shangpinmingcheng}}</div>
          <div class="product-category">{{item.shangpinfenlei}}</div>
          <div class="product-price" v-if="item.price">
            <span class="price-symbol">￥</span>{{item.price}}
          </div>
        </div>
      </div>
    </div>

    <el-pagination
      background
      class="pagination"
      :pager-count="7"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      prev-text="<"
      next-text=">"
      :hide-on-single-page="true"
      :layout='["total","prev","pager","next","sizes","jumper"].join()'
      :total="total"
      @current-change="curChange"
      @size-change="sizeChange"
      @prev-click="prevClick"
      @next-click="nextClick"
    ></el-pagination>

  </div>
</div>
</template>

<script>
  export default {
    //数据集合
    data() {
      return {
	    layouts: '',
		swiperIndex: -1,
        baseUrl: '',
        breadcrumbItem: [
          {
            name: '商品信息'
          }
        ],
        formSearch: {
          shangpinmingcheng: '',
          pinpai: '',
          shangpumingcheng: '',
          price: '',
        },
        fenlei: [],
        dataList: [],
        total: 1,
        pageSize: 12,
		pageSizes: [10,20,30,50],
        totalPage: 1,
        curFenlei: '全部',
        isPlain: false,
        indexQueryCondition: '',
        timeRange: []
      }
    },
    created() {
      this.indexQueryCondition = this.$route.query.indexQueryCondition ? this.$route.query.indexQueryCondition : '';
      this.baseUrl = this.$config.baseUrl;
      this.getFenlei();
      this.getList(1, '全部');
    },
    //方法集合
    methods: {
      add(path) {
        this.$router.push({path: path});
      },
      getFenlei() {
        this.$http.get('option/shangpinfenlei/shangpinfenlei').then(res => {
          if (res.data.code == 0) {
            this.fenlei = res.data.data;
          }
        });
      },
      getList(page, fenlei, ref = '') {
		if(fenlei == '全部') this.swiperIndex = -1;
		for(let i=0;i<this.fenlei.length;i++) {
			if(fenlei == this.fenlei[i]) {
				this.swiperIndex = i;
				break;
			}
		}
        this.curFenlei = fenlei;
        if (this.curFenlei == '全部') {
          this.isPlain = false;
        } else {
          this.isPlain = true;
        }
        let params = {page, limit: this.pageSize};
        let searchWhere = {};
        if (this.formSearch.shangpinmingcheng != '') searchWhere.shangpinmingcheng = '%' + this.formSearch.shangpinmingcheng + '%';
        if (this.formSearch.pinpai != '') searchWhere.pinpai = '%' + this.formSearch.pinpai + '%';
        params['sort'] = 'shangjiariqi';
        params['order'] = 'desc';
        if (this.formSearch.shangpumingcheng != '') searchWhere.shangpumingcheng = '%' + this.formSearch.shangpumingcheng + '%';
        if(this.formSearch.pricestart!='' && this.formSearch.pricestart!=undefined ){
          searchWhere.pricestart = this.formSearch.pricestart
        }
        if(this.formSearch.priceend!='' && this.formSearch.priceend!=undefined){
          searchWhere.priceend = this.formSearch.priceend
        }
        if (this.curFenlei != '全部') searchWhere.shangpinfenlei = this.curFenlei;
        this.$http.get('shangpinxinxi/list', {params: Object.assign(params, searchWhere)}).then(res => {
          if (res.data.code == 0) {
            this.dataList = res.data.data.list;
            this.total = res.data.data.total;
            this.pageSize = res.data.data.pageSize;
            this.totalPage = res.data.data.totalPage;
			
			this.pageSizes = [this.pageSize, this.pageSize*2, this.pageSize*3, this.pageSize*5];
          }
        });
      },
      curChange(page) {
        this.getList(page,this.curFenlei);
      },
      prevClick(page) {
        this.getList(page,this.curFenlei);
      },
      sizeChange(size){
        this.pageSize = size
        this.getList(1,this.curFenlei);
      },
      nextClick(page) {
        this.getList(page,this.curFenlei);
      },
      toDetail(item) {
        this.$router.push({path: '/index/shangpinxinxiDetail', query: {detailObj: JSON.stringify(item)}});
      },
    }
  }
</script>

<style lang="scss" scoped>
.breadcrumb-container {
  padding: 12px;
  margin: 0 auto;
  background: linear-gradient(180deg, #f5f5f5 0%, #fff 32%, #f5f5f5 100%);
  border: 1px solid #eee;
  border-width: 1px 0;

  .el-breadcrumb {
    width: 1200px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1;

    /deep/ .el-breadcrumb__separator {
      margin: 0 9px;
      color: #999;
    }

    /deep/ .el-breadcrumb__inner {
      color: #666;
      &:hover {
        color: #409EFF;
      }
    }
  }
}

.list-container {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.category-sidebar {
  position: absolute;
  top: 20px;
  left: -110px;
  width: 100px;
  display: flex;
  flex-direction: column;

  .category-item {
    padding: 8px 15px;
    margin-bottom: 10px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: linear-gradient(135deg, #ff7e47 0%, #ff9f00 100%);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover, &.active {
      background: linear-gradient(135deg, #ff9f00 0%, #ff7e47 100%);
      transform: translateX(5px);
    }
  }
}

.search-form {
  width: 100%;
  margin: 20px 0;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .el-form-item {
    margin: 0 15px 10px 0;
  }

  .form-label {
    display: inline-block;
    padding: 0 10px;
    line-height: 40px;
    color: #606266;
  }

  .el-input {
    width: 180px;
    /deep/ .el-input__inner {
      border-radius: 4px;
    }
  }

  .search-btn, .add-btn {
    padding: 0 20px;
    height: 40px;
    border-radius: 4px;
    font-size: 14px;
    margin-left: 10px;

    i {
      margin-right: 5px;
    }
  }
}

.product-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px 0;

  .product-item {
    display: flex;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    transition: all 0.3s;
    cursor: pointer;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .product-img {
      width: 50%;
      padding: 10px;

      img {
        width: 100%;
        height: 240px;
        object-fit: cover;
        border-radius: 8px;
      }
    }

    .product-info {
      width: 50%;
      padding: 20px;

      .product-name {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
      }

      .product-category {
        font-size: 14px;
        color: #666;
        margin-bottom: 15px;
      }

      .product-price {
        color: #f56c6c;
        font-size: 20px;
        font-weight: bold;

        .price-symbol {
          font-size: 14px;
          margin-right: 2px;
        }
      }
    }
  }
}

.pagination {
  margin: 30px auto;
  text-align: center;

  /deep/ .el-pagination__total {
    color: #606266;
  }

  /deep/ .el-pager .number {
    &:hover, &.active {
      color: #fff;
      background: #409EFF;
    }
  }
}
</style>
